<template>
<el-dialog
	title= '修改'
	:close-on-click-modal="false"
	:visible.sync="visible"
	center
	width="30%">
	<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" style="marginLeft:40px;">
		<!-- <el-form-item label="营业执照" prop="">
        <picUpload v-model="dataForm.bussinessLicense" />
		</el-form-item> -->
		<el-form-item  v-model="dataForm.state" label="营业状态" size="mini" prop="roleIdList">
				<el-radio-group v-model="dataForm.shopStatus" :disabled = "!isEditable">
				<el-radio label="1" border>营业中</el-radio>
				<el-radio label="0" border>停业</el-radio>   
				</el-radio-group>
		</el-form-item>
			<!-- <el-form-item label="店主" prop="shopOwner">
							<el-input v-model="dataForm.shopOwner" placeholder="店主" :disabled = "!isEditable"></el-input>
			</el-form-item>
			<el-form-item label="店铺名" prop="shopName">
							<el-input v-model="dataForm.shopName" placeholder="店铺名" :disabled = "!isEditable"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="mobile">
							<el-input v-model="dataForm.mobile" placeholder="手机号" :disabled = "!isEditable"></el-input>
			</el-form-item>
			<el-form-item label="地址" prop="mobile">
				<el-input v-model="address" placeholder="请使用地址抓取进行抓取" :disabled="true">
					<template slot="append"><span style="color:#02A1E9" @click="catchAddress">抓取地址</span></template>
				</el-input>
			</el-form-item> -->
	</el-form>
	<span slot="footer" class="dialog-footer">
	<el-button @click="visible = false">取消</el-button>
	<!-- <el-button @click="testFun">获取dataform</el-button> -->
	<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
	</span>

	<myMap v-if="mapVisible"
				ref="myMap"
				@getAddress="getAddress"></myMap>

</el-dialog>
</template>

<script>
import { isEmail, isMobile } from '@/utils/validate'
import myMap from '../../common/map'
import picUpload from '@/components/pic-upload'
import BaiduMap from '../../../utils/map'
export default {
	data() {
		return {
			mapVisible: true,
			BaiduMap:BaiduMap,
			visible: false,
			isEditable:false,
			address: '',
			dataForm:{
				bussinessLicense: '',
				shopId: null,
				shopOwner:'',
				shopName: '',
				imageUrl:'',
				account:'',
				createTime:'',
				mobile: '',
				shopStatus: '1',
				province: '',
				city: '',
				area:'',
				shopAddress: '',
			},
			dataRule:{
				shopName:[
					{required: true, message:'店铺名', trigger: 'blur'}
				],
				mobile:[
					{required: true, message:'请输入', trigger: 'blur'}
				]
			}
		}     
	},

	components:{
		myMap,
		picUpload 	
	},

	methods: {
		init (values) {
			console.log(values);
			
			let row = values[0]			
			this.isEditable = values[1] == 'update'?true:false
			this.visible = true
			this.dataForm = row
			this.dataForm.shopStatus = String(this.dataForm.shopStatus)
			this.address = [row.province,row.city,row.area,row.shopAddress].join(',')

		},

		// 表单提交
		dataFormSubmit () {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					this.$http({
						url: this.$http.adornUrl("/shop/shopDetail/shopStatus?shopId="+this.dataForm.shopId+"&shopStatus="+this.dataForm.shopStatus),
						method: 'put',
					}).then(({data}) => {
						this.$message({
							message:'操作成功',
							type:'success'
						})
						this.visible = false
						this.$emit("refreshDataList")
					})
				}
			})
		},

		//图片上传成功回调
		handleAvatarSuccess(){
				console.log("上传成功");            
		},

		//上传前回调图片处理函数
		beforeAvatarUpload(){

		},

				//自定义事件getAddress
		getAddress(coordinate,addressArray){
			console.log(this.dataForm.lng,this.dataForm.lat,this.dataForm.province,this.dataForm.city,this.dataForm.area,this.dataForm.showAddress);
			
			this.dataForm.lng = coordinate.lng
			this.dataForm.lat = coordinate.lat
			this.dataForm.province = addressArray.province
			this.dataForm.city = addressArray.city
			this.dataForm.area = addressArray.district
			this.dataForm.shopAddress = addressArray.street+addressArray.streetNumber
			this.address = this.dataForm.province+this.dataForm.city+this.dataForm.area+this.dataForm.shopAddress
			// console.log(addressArray);
			console.log(this.dataForm.lng,this.dataForm.lat,this.dataForm.province,this.dataForm.city,this.dataForm.area,this.dataForm.showAddress);
			// console.log(coordinate);

			// console.log(this.dataForm);
		},


		//抓取地址
		catchAddress(){
			console.log("catchAddress is running");
			this.mapVisible = true    
			this.$nextTick(() => {
				// console.log(this.$refs.myMap);
				this.$refs.myMap.init()
			})
		},
		
	},

  mounted(){
    this.BaiduMap.init()
  }
	
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: 130px;
    height: 130px;
    display: block;
  }
  .el-input {
    width: 500px;
  }	

</style>
